<template>
	<view class="warpper">
		<view class="u-tabs-box bottom-line">
			<u-tabs-swiper activeColor="#4787F0" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750" bar-width="120"></u-tabs-swiper>
		</view>
		<view v-if="current==0" class="main-current-0">
			<view class="main p-l-r-32 bg-color ">
				<view class="main-box ">
					<view class="p-l-r-32 flex main-box-info">
						<view>
							<u-avatar :src="src" size="50" style="margin-right: 24rpx;"></u-avatar>
						</view>
						<view>
							<text style="color: #000;">张力辉</text><br />
						</view>
					</view>
					<view class="" style="text-align: center;margin-top: 32rpx;">
						<text>小程序推广码</text>
						<view class="code"></view>
					</view>
				</view>
			</view>
			<view class="feater-button">
				<view class="file">
					<image src="../../../static/images/file-image.png"></image>
				</view>
				<text>保存到相册</text>
			</view>
		</view>
		<view class="list p-l-r-32" v-if="current==1">
			<view class="list-item">
				<view class="item">被推广人：<text>张建军</text></view>
				<view>推广日期：<text> 2020/02/23 12:23</text></view>
			</view>
			<view class="list-item">
				<view class="item">被推广人：<text>张建军</text></view>
				<view>推广日期：<text> 2020/02/23 12:23</text></view>
			</view>
			<view class="list-item">
				<view class="item">被推广人：<text>张建军</text></view>
				<view>推广日期：<text> 2020/02/23 12:23</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				current: 0,
				swiperCurrent: 0,
				src:'',
				list: [{
						name: '推广码'
					},
					{
						name: '推广记录'
					}
				],
			};
		},
		methods: {
			// tab栏切换
			change(index) {
				console.log(index)
				this.swiperCurrent = index;
				this.getOrderList(index);
				this.current = index;
			},
			// 页面数据
			getOrderList(idx) {

			},
		},
		onReady() {

		},
	};
</script>



<style lang="scss" scoped>
	
	.main {
		margin-top: 40px;
        
		.main-box {
			padding: 40rpx;
			background-color: #E7E7E7;
			border-radius: 16rpx;
			.main-box-info {
				text-align: center;
				align-items: center;
				border-bottom: 2rpx solid #CDDEFD;
				padding-bottom: 40rpx;
			}
		}

		.code {
			width: 440rpx;
			height: 440rpx;
			margin: auto;
			background-color: red;
			margin-top: 32rpx;
		}
	}

	.feater-button {
		text-align: center;
		margin-top: 120rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #216DD9;
		line-height: 44rpx;

		.file {
			border: 1px solid rgba(204, 204, 204, 1);
			border-radius: 50%;
			width: 96rpx;
			height: 96rpx;
			margin: auto;
			margin-bottom: 16rpx;
		}

	}

	.list {
		.list-item {
			margin-top: 22rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 8rpx;
			padding: 22rpx 40rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);
			line-height: 44rpx;

			.item {
				margin-bottom: 14rpx;
			}
		}
	}
	.warpper{
		display: flex;
		flex-direction: column;
		.main-current-0{
			flex: 1;
			background-color: #FFFFFF;
		}
	}
</style>